﻿
@{
    ViewData["Title"] = "ModuleMenus";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}

@section header{
    <style>
        .handle-box {
            margin-bottom: 20px;
        }

        .handle-select {
            width: 120px;
        }

        .handle-input {
            width: 300px;
            display: inline-block;
        }

        .table {
            width: 100%;
            font-size: 14px;
        }

        .red {
            color: #ff0000;
        }

        .mr10 {
            margin-right: 10px;
        }

        .table-td-thumb {
            display: block;
            margin: auto;
            width: 40px;
            height: 40px;
        }

        /*表单*/
        .el-form-item {
            width: 23%
        }

        .el-dialog__header {
            background-color: rgb(51, 51, 51);
        }

        .el-dialog__title {
            color: antiquewhite
        }

        .bootstrap-elem-field {
            margin-bottom: 10px;
            padding: 0;
            padding-top: 10px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }

            .bootstrap-elem-field legend {
                margin-left: 20px;
                padding: 0 10px;
                font-size: 16px;
                font-weight: 300;
                border-bottom: none;
                width: auto;
            }

        .bootstrap-field-box {
            padding: 10px 15px;
        }

        .el-table__body tr.current-row > td {
            background-color: #f5dc6f !important;
        }
    </style>
}

<div id="app" v-cloak>
    <div id='wrapper'>
        <div class="container">

            <el-card class="box-card" style="margin-bottom:10px;">
                <div slot="header" class="clearfix">
                    <i class="el-icon-s-order">收益列表</i>
                </div>

                <div class="handle-box">

                    <el-select v-model="queryModel.platForm" placeholder="推广平台">
                        <el-option v-for="item in platFormList"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>

                    <el-input v-model="queryModel.itemInfo" class='handle-input mr10' placeholder="请输入产品信息"></el-input>
                    <el-input v-model="queryModel.agentInfo" class='handle-input mr10' placeholder="请输入分销商信息" ></el-input>

                    <el-button type="primary" icon="el-icon-search" v-on:click="handleSearch">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh-left" v-on:click="handleReset">重置</el-button>

                </div>

                <el-table v-loading="loading" v-on:current-change="handleCurrentRowChange" :data="tableData" style="margin-bottom: 20px;"
                          highlight-current-row row-key="id" border>
                    <el-table-column prop="agentName"
                                     label="分销商">
                    </el-table-column>
                    <el-table-column prop="itemName"
                                     label="产品名">
                    </el-table-column>
                    <el-table-column prop="profitTypeName"
                                     label="收益类型">
                    </el-table-column>
                    <el-table-column prop="visitCount"
                                     label="访问次数">
                    </el-table-column>
                    <el-table-column prop="finishCount"
                                     label="完成次数">
                    </el-table-column>
                    <el-table-column prop="perAmount"
                                     label="单次收益">
                    </el-table-column>
                    <el-table-column prop="profit"
                                     label="今日收益">
                    </el-table-column>
                    <el-table-column prop="profitDate"
                                     label="结算时间">
                    </el-table-column>

                </el-table>

                <div class="pagination" style="text-align: center;">
                    <el-pagination background v-on:current-change="handleCurrentChange" v-on:size-change='handleSizeChange' :current-page.sync="queryModel.pageModel.page" :page-sizes="[10, 20, 50, 80]"
                                   :page-size.sync="queryModel.pageModel.rows" layout="total,sizes, prev, pager, next" :total="total">
                    </el-pagination>

                </div>

            </el-card>

        </div>

    </div>
</div>

@section footer{
    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: function () {
                return {
                    loading: false,
                    queryModel: {
                        auditFlag: "",
                        itemInfo: "",
                        agentInfo: "",
                        platForm: "",
                        pageModel: {
                            page: 1,
                            rows: 10
                        }
                    },
                    itemId: "",
                    platFormList: [],
                    tableChecked: [],
                    tableData: [],
                    tableCurrentRow: null,
                    total: 0,
                    formModel: {
                        visible: false,
                        title: "",
                        view: "",
                        model: {
                            
                        }
                    },
                    viewModel: {

                    }

                }
            },
            created() {
                var that = this;
                //this.queryModel.status = "-1";
                this.getDatas();
                this.getPlatFormList();
            },
            methods: {
                getDatas: function () {
                    var that = this;
                    that.loading = true;
                    that.queryModel.auditFlag = "10";
                    request.post("/biz/profit/QueryCalcResult", that.queryModel).then(function (res) {
                        console.log(res.data);
                        that.tableData = res.data.data.rows;
                        that.total = res.data.data.total;
                        that.loading = false;
                    });
                },
                getPlatFormList: function () {
                    var that = this;
                    request.get('/admin/baseType/select?typeCode=PLATFORM').then(function (res) {
                        that.platFormList = res.data;
                    });
                },
                
                handleCurrentChange: function (index) {
                    this.queryModel.pageModel.page = index;
                    this.getDatas();
                },
                handleSizeChange: function () {
                    this.getDatas();

                },
                handleSearch: function () {
                    this.getDatas();

                },
                
                handleReset: function () {
                    this.queryModel.auditFlag = "10";
                    this.queryModel.agentInfo = "";
                    this.queryModel.itemInfo = "";
                    this.queryModel.platForm = "";
                    this.getDatas();
                },
                
            }

        });

    </script>

}